import './PSM.css'
import React, { useState, useEffect } from 'react'
import Axios from 'axios'
import { Select, Input, Button, Table,Modal,message } from 'antd'
const { Option } = Select
const data = ['深圳分公司', '所有经营机构', '改成标准的名字：', '信息技术部/大数据中心', '客户服务管理部', '出单中心', '理赔事业部', '办公室/风险管理研究中心', '盐田支公司', '龙岗支公司', '车险营业部']
const PSM = (props) => {
  //查询条件值
  const [inputValue, setInputValue] = useState('')
  const [inputValue2, setInputValue2] = useState('全部')
  const [inputValue3, setInputValue3] = useState('正常')
  const [inputValue4, setInputValue4] = useState('全部')
  //新增条件值
  const [newInputValue2, setNewInputValue2] = useState('xx支公司')
  const [newInputValue, setNewInputValue] = useState('440320')
  const [newInputValue3, setNewInputValue3] = useState('请选择机构类别')
  const [newInputValue4, setNewInputValue4] = useState('启用')

  const [dataList, setDataList] = useState()
  const [isok,setIsok] = useState()
  const [codeValue,setCodeValue] = useState([])
  const [unitValue,setUnitValue] = useState([])
  const [categoryValue,setCategoryValue] = useState([])
  const [visibe,setVisibe] = useState(false)
  useEffect(() => {
      Axios.get('/psm').then(response => {
      const {data} = response
      setDataList(data)
    })
  },[])
  useEffect(()=>{
    if(dataList){
      let len = dataList.length
      let arr = []
      let arr2 = []
      let arr3 = []
      let arr4 = []
      for(let i = 0;i<len;i++){
        arr.push(true)
        arr2.push(dataList[i].code)
        arr3.push(dataList[i].unit)
        arr4.push(dataList[i].category)
      }
      setIsok(arr)
      setCodeValue(arr2)
      setUnitValue(arr3)
      setCategoryValue(arr4)
    }
  },[dataList])
  const columns = [
    {
      title: "状态",
      dataIndex: 'penging'
    },
    {
      title: "机构代码",
      key: 'code',
      render:(row,col,index)=>{
        return (
          <>
          {
            isok ? !isok[index] ?<Input value={codeValue[index]}  style={{width:'71px'}} onChange={(e)=>{handleEditCode(e.target.value,index)}}/>:col.code : 666
          }
          </>

        )

      }
    },
    {
      title: "单位名称",
      key: 'unit',
      render:(row,col,index)=>{
        return (
          <>
          {
            isok ? !isok[index] ?<Input value={unitValue[index]}  style={{width:'180px'}} onChange={(e)=>{handleEditUnit(e.target.value,index)}}/>:col.unit : 666
          }
          </>
        )
      }
    },
    {
      title: "类别",
      key: 'category',
      render:(row,col,index)=>{
        return (
          <>
          {
            isok ? !isok[index] ?<Input value={categoryValue[index]}  style={{width:'80px'}} onChange={(e)=>{handleEditCategory(e.target.value,index)}}/>:col.category : 666
          }
          </>
        )
      }
    },
    {
      title: "操作",
      key: 'id',
      render: (row, col, index) => {
        return (
          <>
            {
              col.penging === '禁用' ? <span className="page-span" onClick={() => { handleEdit(index,col) }}>启动</span> : <span className="page-span" onClick={() => { handleEdit(index,col) }}>停用</span>
            }
            {
              isok ? isok[index] ?<span className="page-span" onClick={()=>{handleNewEdit(index,col,false)}}>编辑</span> : <span className="page-span" onClick={()=>{handleNewEdit(index,col,true)}}>保存</span> : null
            }

          </>
        )
      }
    },
  ]
  return (
    <div className="page-psm">
      <div className="accout">
        <label htmlFor="单位名称">单位名称:</label>
        <Select
          style={{ width: '12%', margin: '0px 25px 0 15px' }}
          value={inputValue2}
          onChange={(e)=>{setInputValue2(e)}}
        >
          {
            data.map(item => {
              return (
                <Option value={item} key={item}>{item}</Option>
              )
            })
          }
        </Select>
        <label>用户状态:</label>
        <Select
          style={{ width: '12%', marginRight: '4%', marginLeft: '14px' }}
          value={inputValue3}
          onChange={(e)=>{setInputValue3(e)}}
        >
          <Option value="启用">正常</Option>
          <Option value="停用">停用</Option>
        </Select>
        <label>类别:</label>
        <Select
          style={{ width: '12%', marginRight: '4%', marginLeft: '14px' }}
          value={inputValue4}
          onChange={(e)=>{setInputValue4(e)}}
        >
          <Option value="机关部门">机关部门</Option>
          <Option value="经营机构">经营机构</Option>
        </Select>
        <label>机构代码:</label>
        <Input
          type="text"
          placeholder="机构代码"
          style={{ width: '15%', marginRight: '3%', marginLeft: '14px' }}
          value={inputValue}
          onChange={(e) => { setInputValue(e.target.value) }}
        />

        <Button type="danger" onClick={()=>{handleQuery()}}>查询</Button>
      </div>
      <div className="wrop">
        <Button className="wrop-button" type="danger" onClick={()=>{setVisibe(true)}}>新增</Button>
        <Table
          columns={columns}
          dataSource={dataList}
          rowKey="id"
          style={{ width: '1100px' }}
          pagination={false}
          bordered
        />
      </div>
      <Modal
          title="新增机构"
          visible={visibe}
          onOk={()=>{handleOk()}}
          onCancel={()=>{handleCancel()}}
          cancelText="取消"
          okText="确认"
          okType="danger"
          bodyStyle={{textAlign:'center',height:'300px',paddingTop:'30px'}}
          width={400}
          mask={false}
        >
          <div>
            <label>机构代码 <span style={{color:'red'}}>*</span> </label>
            <Input
              type="text"
              placeholder="机构代码"
              style={{width:'250px',marginLeft:'15px'}}
              value={newInputValue}
              onChange={(e) => { setNewInputValue(e.target.value) }}
            />
          </div>
          <div>
            <label htmlFor="单位名称">单位名称<span style={{color:'red'}}>*</span> </label>
            <Input
              type="text"
              placeholder="单位名称"
              style={{width:'250px',marginLeft:'15px'}}
              value={newInputValue2}
              onChange={(e) => { setNewInputValue2(e.target.value) }}
            />
          </div>
          <div>
            <label>机构类别<span style={{color:'red'}}>*</span> </label>
            <Select
              style={{ width: '250px',marginLeft: '14px' }}
              value={newInputValue3}
              onChange={(e)=>{setNewInputValue3(e)}}
            >
              <Option value="机关部门">机关部门</Option>
              <Option value="经营机构">经营机构</Option>
            </Select>
          </div>
          <div>
            <label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 状态<span style={{color:'red'}}>*</span> </label>
            <Select
              style={{ width: '250px', marginLeft: '14px' }}
              value={newInputValue4}
              onChange={(e)=>{setNewInputValue4(e)}}
            >
              <Option value="正常">正常</Option>
              <Option value="停用">停用</Option>
            </Select>
          </div>
        </Modal>
    </div>
  )
  //状态编辑
  async function handleEdit (index,rol) {
    let newDataList = [...dataList]
    const {id} = rol
    if (newDataList[index].penging === '启用'){
      newDataList[index].penging = '禁用'
      setDataList(newDataList)
      Axios.patch(`/psm/${id}`,{
        penging:'禁用'
      })
    }else {
      newDataList[index].penging = '启用'
      setDataList(newDataList)
      await Axios.patch(`/psm/${id}`,{
        penging:'启动'
      })
    }


  }
  //表格编辑
  async function handleNewEdit (index,rol,ok) {
    let newIsok = [...isok]
    newIsok[index] = !isok[index]
    setIsok(newIsok)
    //数据同时更新
     if(ok) {
      const {id} = rol
      await Axios.patch(`/psm/${id}`,{
        code:codeValue[index],
        unit:unitValue[index],
        category:categoryValue[index]
      }).then(response => {
        const {data} = response
        let newDataList = [...dataList]
        newDataList[index] = data
        setDataList(newDataList)
      })
    }
  }
  //机构代码编辑
  function handleEditCode (value,index) {
    let newCodeValue = [...codeValue]
    newCodeValue[index] = value
    setCodeValue(newCodeValue)
  }
  //单位名称编辑
  function handleEditUnit(value,index){
    let newUnitValue = [...unitValue]
    newUnitValue[index] = value
    setUnitValue(newUnitValue)
  }
  //类别编辑
  function handleEditCategory (value,index){
    let newCategoryValue = [...categoryValue]
    newCategoryValue[index] = value
    setCategoryValue(newCategoryValue)
  }
  //新增开关
  async function handleOk () {

    console.log(newInputValue,newInputValue2,newInputValue3,newInputValue4)
    if(newInputValue3 === '请选择机构类别'){
      message.error('请选择机构类别')
    }else{
      await Axios.post('/psm',{
      penging: newInputValue4,
      code: newInputValue,
      unit: newInputValue2,
      category: newInputValue3
      }).then(response => {
        const {data} = response
        let newDataList = [...dataList,data]
        setDataList(newDataList)
      })
      setVisibe(false)
    }
  }
  function handleCancel(){
    setVisibe(false)
  }
  //查询
  function handleQuery(){
    let obj = {
      penging: inputValue3 === "正常" ? '启用' : inputValue3,
      code: inputValue === '' ? undefined : inputValue,
      unit: inputValue2 === "全部" ? undefined : inputValue2,
      category: inputValue4 === "全部" ? undefined : inputValue4,
    }
    for(let e in obj){
      if(typeof(obj[e]) === 'undefined'){
        delete obj[e]
      }
    }
    const arr = Object.keys(obj)
    let newDataList = dataList.filter(item => {
      for(let i = 0,len = arr.length;i<len;i++){
        if(obj[arr[i]] !== item[arr[i]]){
          return false
        }
      }
      return item
    })
    setDataList(newDataList)
  }
}

export default PSM
